<!--
 * @Author Malred
 * @Date 2025-06-02 05:11:31
 * @Description 
 -->
<template>
  <el-table :data="data" border style="width: 100%" @selection-change="handleSelectionChange">
    <!-- 多选列 -->
    <el-table-column type="selection" width="55"></el-table-column>

    <!-- 动态列 -->
    <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
    >
      <template #default="scope">
        <slot :name="'col-' + col.prop" :row="scope.row">
          {{ scope.row[col.prop] }}
        </slot>
      </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <slot name="operation" :row="scope.row">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {defineProps, defineEmits, ref} from 'vue';

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    required: true
  },
  onDelete: { // 新增 prop，接收删除方法
    type: Function,
    default: null
  }
});

const emit = defineEmits(['edit', 'delete', 'selection-change']);

const selectedRows = ref([]);

const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
  emit('selection-change', rows);
};

const handleEdit = (row) => {
  emit('edit', row);
};

const handleDelete = (row) => {
  if (props.onDelete) {
    props.onDelete([row]);
  } else {
    emit('delete', [row]);
  }
};
</script>

